import React from 'react';
import { Button, Menu, Icon } from 'antd';
import './index.less';

const { Item } = Menu;
class List extends React.Component{
  constructor(props) {
    super(props);
    this.id = 0;
    this.state = { current: '1' };
  }

  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  renderItem = () => {
    this.id++;
    return (
      <Item key='1' className="match">
        <span className="match-item">nav 1</span>
        <div className="match-icon">
          <Icon type="edit" />
          <Icon type="delete" />
        </div>
      </Item>
    );
  }

  render() {
    return (
      <div className='competition_manage'>
        <div className='list-title'>
          <span className='list-header'>
            比赛列表
          </span>
          <Button icon='plus-circle-o'  type="primary">
            创建比赛
          </Button >
        </div>
        <Menu
          onClick={this.handleClick}
          selectedKeys={[this.state.current]}
        >
          {this.renderItem()}
          <Menu.Item key="2">
            <Icon type="video-camera" />
            <span className="nav-text">nav 2</span>
          </Menu.Item>
          <Menu.Item key="3">
            <Icon type="upload" />
            <span className="nav-text">nav 3</span>
          </Menu.Item>
          <Menu.Item key="4">
            <Icon type="bar-chart" />
            <span className="nav-text">nav 4</span>
          </Menu.Item>
          <Menu.Item key="5">
            <Icon type="cloud-o" />
            <span className="nav-text">nav 5</span>
          </Menu.Item>
          <Menu.Item key="6">
            <Icon type="appstore-o" />
            <span className="nav-text">nav 6</span>
          </Menu.Item>
        </Menu>
      </div>
    )
  }
}

export default List;